/**
 * Created by tanbingqin on 2019/12/25.
 */
import {messages} from "share/common";
import React from 'react';
import { connect } from 'react-redux';

import { Button, Divider, Row, Col, Radio, InputNumber, message } from 'antd'
const RadioGroup = Radio.Group;
import formService from 'containers/setting/form/form.service'
import 'styles/setting/form/form-detail.scss'
import errorMessage from 'share/errorMessage';
import menuRoute from 'routes/menuRoute'

class FormSettingExpense extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      saveLoading: false, //保存的loading
      propertyList: [], //接口获取的数据propertyList
      isEditing: false, //是否是编辑状态
      versionChange: false, //是否允许版本变更
      autoStop: false, //是否允许自动关闭
      employeeAutoStop: false, //是否允许员工自行关闭
      autoStopDays: null, //自动关闭天数
      employeeRestart: false, //是否允许员工重新启用
      restartDays: null //重新启用天数
    };
    this.formList = menuRoute.getRouteItem('form-list','key'); //表单列表页
  }

  componentWillMount() {
    const { formOID } = this.props;
    this.getPropertyList(formOID);
  }

  //获取propertyList
  getPropertyList = (formOID) => {
    formService.getPropertyList(formOID).then(res => {
      if (res.status === 200) {
        this.setState({
          propertyList: res.data,
        }, this.initData);
      }
    });
  };

  initData = () => {
    const { propertyList } = this.state;
    propertyList.forEach(property => {
      if (property.propertyName === 'application.change.enable') {
        this.setState({versionChange: property.propertyValue === 'true'});
      }
      if (property.propertyName === 'application.close.enabled') {
        this.setState({autoStop: property.propertyValue === '1'});
      }
      if (property.propertyName === 'application.close.closeDay') {
        this.setState({autoStopDays: property.propertyValue ? parseInt(property.propertyValue) : null});
      }
      if (property.propertyName === 'application.close.participant.enabled') {
        this.setState({employeeAutoStop: property.propertyValue === '1'});
      }
      if (property.propertyName === 'application.close.restart.enabled') {
        this.setState({employeeRestart: property.propertyValue === '1'});
      }
      if (property.propertyName === 'application.close.restart.closeDay') {
        this.setState({restartDays: property.propertyValue ? parseInt(property.propertyValue) : null});
      }
    });
  };

  handleStatusChange = (value, key) => {
    this.setState({
      [key]: value
    });
  };

  handleChangeAmount = (value, key) => {
    if (!isNaN(value) && value !== null && value !== undefined && value !== '') {
      this.setState({
        [key]: value
      });
    }
  };

  cancelEditing = () => {
    this.setState({isEditing: false});
    this.initData();
  };

  handleEdit = () => {
    this.setState({isEditing: true});
  };

  handleSave = () => {
    const { formOID } = this.props;
    const { versionChange, autoStop, employeeAutoStop, employeeRestart, autoStopDays, restartDays } = this.state;

    if(autoStop && !parseInt(autoStopDays)){
      message.error(messages('request-2.key154')/*自动关闭天数必须为正整数*/);
      return;
    }
    if(employeeRestart && !parseInt(restartDays)){
      message.error(messages('request-2.key155')/*重新启用的关闭天数必须为正整数*/);
      return;
    }

    let params = [];
    params.push({
      formOID: formOID,
      propertyName: 'application.change.enable',
      propertyValue: versionChange
    });
    params.push({
      formOID: formOID,
      propertyName: 'application.close.enabled',
      propertyValue: autoStop ? '1' : '0'
    });
    params.push({
      formOID: formOID,
      propertyName: 'application.close.closeDay',
      propertyValue: autoStopDays
    });
    params.push({
      formOID: formOID,
      propertyName: 'application.close.participant.enabled',
      propertyValue: employeeAutoStop ? '1' : '0'
    });
    params.push({
      formOID: formOID,
      propertyName: 'application.close.restart.enabled',
      propertyValue: employeeRestart ? '1' : '0'
    });
    params.push({
      formOID: formOID,
      propertyName: 'application.close.restart.closeDay',
      propertyValue: restartDays
    });
    this.setState({saveLoading: true});
    formService.saveHuilianyiForm(params).then(res => {
      if(res.status === 200){
        message.success(messages('request-2.key156')/*保存成功*/);
        this.props.handlePageJump(true);
      }else{
        message.error(messages('common.save.filed')/*保存失败*/);
        this.setState({saveLoading: false});
      }
    }).catch(e => {
      this.setState({saveLoading: false});
      errorMessage(e.response);
    });
  };

  //value为true 说明要刷新列表，为event点击事件时不做刷新
  goBack = (value) => {
    const { close } = this.context;
    if (close) {
      close(value);
    } else {
      this.context.router.push(this.formList.url);
    }
  };

  render() {
    const { form } = this.context;
    const { isEditing, versionChange, autoStop, employeeAutoStop, employeeRestart, autoStopDays, restartDays, saveLoading } = this.state;
    return (
      <div className="form-setting">
        <div className="form-setting-expense">
          <div className="content">
            <div>{messages('request-2.key157')/*设置说明：设置该单据是否启用相应的管控规则*/}</div>
            <div className="block-title">{messages('request-2.key158')/*版本变更*/}</div>
            <Divider dashed />
            <Row>
              <Col span={4}>{messages('request-2.key159')/*允许版本变更*/}：</Col>
              <Col span={20}>
                <RadioGroup disabled={!isEditing} value={versionChange} onChange={e => this.handleStatusChange(e.target.value, 'versionChange')}>
                  <Radio value={true}>{messages('request-2.key160')/*允许*/}</Radio>
                  <Radio style={{marginLeft: 20}} value={false}>{messages('request-2.key161')/*不允许*/}</Radio>
                </RadioGroup>
                <div style={{color: '#989898'}}>{messages('request-2.key162')/*允许版本变更，则费用申请单审批通过后，员工可以修改单据*/}</div>
              </Col>
            </Row>
            <div className="block-title">{messages('request-2.key163')/*关闭单据*/}</div>
            <Divider dashed />
            <Row>
              <Col span={4}>{messages('request-2.key164')/*允许自动关闭*/}：</Col>
              <Col span={20}>
                <RadioGroup disabled={!isEditing} value={autoStop} onChange={e => this.handleStatusChange(e.target.value, 'autoStop')}>
                  <Radio value={true}>{messages('request-2.key160')/*允许*/}</Radio>
                  <Radio style={{marginLeft: 20}} value={false}>{messages('request-2.key161')/*不允许*/}</Radio>
                </RadioGroup>
                <div>
                  <span>{messages('common.end.date')/*结束日期*/}&nbsp;&nbsp;&nbsp;</span>
                  <InputNumber
                    size='small'
                    min={0}
                    max={999}
                    precision={0}
                    disabled={!isEditing || !autoStop}
                    value={autoStopDays}
                    onChange={(value) => this.handleChangeAmount(value, 'autoStopDays')}
                  />
                  <span>&nbsp;&nbsp;&nbsp;{messages('request-2.key165')/*天后系统自动关闭*/}</span>
                </div>
                <div style={{color: '#989898'}}>{messages('request-2.key166')/*选择允许，则结束日期后，在设置天数后自动关闭，未配置结束日期则从审批通过后开始计算*/}</div>
              </Col>
            </Row>
            <Row>
              <Col span={4}>{messages('request-2.key167')/*允许员工自行关闭*/}：</Col>
              <Col span={20}>
                <RadioGroup disabled={!isEditing} value={employeeAutoStop} onChange={e => this.handleStatusChange(e.target.value, 'employeeAutoStop')}>
                  <Radio value={true}>{messages('request-2.key160')/*允许*/}</Radio>
                  <Radio style={{marginLeft: 20}} value={false}>{messages('request-2.key161')/*不允许*/}</Radio>
                </RadioGroup>
                <div style={{color: '#989898'}}>{messages('request-2.key168')/*选择允许，申请单审批通过后，申请单详情显示关闭按钮，员工可自行关闭费用申请单*/}</div>
              </Col>
            </Row>
            <Row>
              <Col span={4}>{messages('request-2.key169')/*允许员工重新启用*/}：</Col>
              <Col span={20}>
                <RadioGroup disabled={!isEditing} value={employeeRestart} onChange={e => this.handleStatusChange(e.target.value, 'employeeRestart')}>
                  <Radio value={true}>{messages('request-2.key160')/*允许*/}</Radio>
                  <Radio style={{marginLeft: 20}} value={false}>{messages('request-2.key161')/*不允许*/}</Radio>
                </RadioGroup>
                <div>
                  <span>{messages('request-2.key170')/*重新启用*/}&nbsp;&nbsp;&nbsp;</span>
                  <InputNumber
                    size='small'
                    min={0}
                    max={999}
                    precision={0}
                    disabled={!isEditing || !employeeRestart}
                    value={restartDays}
                    onChange={(value) => this.handleChangeAmount(value, 'restartDays')}
                  />
                  <span>&nbsp;&nbsp;&nbsp;{messages('request-2.key165')/*天后系统自动关闭*/}</span>
                </div>
                <div style={{color: '#989898'}}>{messages('request-2.key171')/*选择允许，当申请单关闭后，申请单详情显示重新启用按钮，支持员工重新启用申请单，并在设置天数后自动关闭*/}</div>
              </Col>
            </Row>
          </div>
          {form.edit && (
            <div className='form-setting-buttons bottom-bar'>
              {isEditing ?
                <div>
                  <Button type='primary' loading={saveLoading} className='buttons-save' onClick={this.handleSave}>
                    {messages('common.save')/*保存*/}
                  </Button>
                  <Button type='primary' className='buttons-cancelEdit' onClick={this.cancelEditing}>
                    {messages('request-2.key172')/*取消编辑*/}
                  </Button>
                  <Button type='default' onClick={(e) => this.goBack(true)}>{messages('common.back')/*返回*/}</Button>
                </div>
                :
                <div>
                  <Button type='primary' className='buttons-edit' onClick={this.handleEdit}>{messages('common.edit')/*编辑*/}</Button>
                  <Button type='default' onClick={(e) => this.goBack(true)}>{messages('common.back')/*返回*/}</Button>
                </div>
              }
            </div>
          )}
        </div>
      </div>
    )
  }
}

FormSettingExpense.contextTypes = {
  form: React.PropTypes.object,
  router: React.PropTypes.object,
  close: React.PropTypes.any
};

function mapStateToProps(state) {
  return {

  }
}

export default connect(mapStateToProps)(FormSettingExpense)
